import pdf from '@/assets/pdf.png';
import { useGetToken } from '@/utils/request';
import { DownloadOutlined } from '@ant-design/icons';

import type { GetProp, UploadProps } from 'antd';
import { Button, Flex, Form, Input, message, Modal, Upload } from 'antd';
import { useIntl } from 'umi';

import './index.less';
type Props = {
  visible: boolean;
  handleCancel: () => void;
  handleOK: () => void;
};
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

const AdviceModal: React.FC<Props> = ({ visible, handleCancel, handleOK }) => {
  const intl = useIntl();
  const { urlAction, token } = useGetToken();
  const beforeUpload = (file: FileType) => {
    const isLt20M = file.size / 1024 / 1024 < 20;
    if (!isLt20M) {
      message.error(intl.formatMessage({ id: 'home.live_max' }));
    }
    return isLt20M || Upload.LIST_IGNORE;
  };
  return (
    <Modal
      onCancel={handleCancel}
      footer={false}
      className="advice_modal"
      width={770}
      title={
        <div style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 20 }}>
          {intl.formatMessage({ id: 'home.contact_advice' })}
        </div>
      }
      centered
      open={visible}
      styles={{
        content: {
          padding: '43px 54px',
        },
      }}
      destroyOnClose
    >
      <Form
        onFinish={(value: any) => {
          console.log(value);
          handleOK();
        }}
        layout="vertical"
        requiredMark={false}
      >
        <Form.Item
          rules={[{ required: true }]}
          name="name"
          label={intl.formatMessage({ id: 'home.advice_detail' })}
        >
          <Input.TextArea
            autoSize={{ minRows: 5, maxRows: 5 }}
            style={{ backgroundColor: '#f6f7f7', border: 'none' }}
            maxLength={200}
            placeholder={intl.formatMessage({ id: 'home.advice_problem' })}
          />
        </Form.Item>
        <Form.Item
          valuePropName="fileList"
          getValueFromEvent={(e: any) => {
            let newFileList = [...e.fileList];

            newFileList = newFileList.map((file) => {
              const { status, response, url = '' } = file;

              if (status == 'done' && !url) {
                if (response?.code == '100200') {
                  file.url = file.response.data;
                } else {
                  file.status = 'error';
                  message.error({
                    key: 'update',
                    content: response?.message || 'error',
                  });
                }
              }

              return file;
            });
            return newFileList;
          }}
          name="url"
          label={
            <Flex align="center" gap={8}>
              {intl.formatMessage({ id: 'home.insurance_upload' })}
              <span style={{ color: '#999', fontSize: 13 }}>
                {intl.formatMessage({ id: 'home.live' })}
              </span>
            </Flex>
          }
        >
          <Upload
            iconRender={(file) => {
              const { type = '', url = '' } = file;
              if (type.indexOf('pdf') > -1 || url?.includes('.pdf')) {
                return <img style={{ height: '58%', display: 'inherit' }} src={pdf} />;
              }
            }}
            beforeUpload={beforeUpload}
            headers={{ Authorization: `Bearer ${token}` }}
            action={urlAction}
            accept=".jpg,.png,.pdf,.jpeg"
            listType="picture-card"
            maxCount={10}
            multiple
          >
            <button type="button" style={{ border: 0, background: 'none' }}>
              <DownloadOutlined />
              {intl.formatMessage({ id: 'home.insurance_upload' })}
            </button>
          </Upload>
        </Form.Item>
        <Flex gap={14}>
          <Form.Item
            rules={[{ required: true }]}
            name="code"
            label={intl.formatMessage({ id: 'login.captcha' })}
          >
            <Input
              style={{ width: 160, height: 40 }}
              placeholder={intl.formatMessage({ id: 'login.captcha' })}
            />
          </Form.Item>
          <Flex
            style={{
              marginTop: 39,
              backgroundColor: '#d9d9d9',
              minWidth: 115,
              height: 40,
              borderRadius: 4,
              fontWeight: 'bold',
              color: '#000',
            }}
            align="center"
            justify="center"
          >
            未对接
          </Flex>
        </Flex>
        <Flex justify="center" style={{ marginTop: 32 }}>
          <Button
            htmlType="submit"
            className="adivce_btn"
            type="primary"
            style={{
              height: 40,
              minWidth: 300,
              fontSize: 18,
              fontWeight: 400,
            }}
          >
            <div>{intl.formatMessage({ id: 'home.submit' })}</div>
          </Button>
        </Flex>
      </Form>
    </Modal>
  );
};

export default AdviceModal;
